<template>
  <div class="hear" :style="setRowsOrColumns">
    <div
      class="item"
      v-for="(item, index) in backList"
      @click.stop="openMenuFun($event, item, index)"
      :style="{ backgroundColor: item.isUse ? '#1f1f1f' : '#464646' }"
    >
      <svg-icon
        v-if="item.isUse"
        iconFileName="lock-line"
        style="color: #fff"
      ></svg-icon>
      <span class="item-name" v-else>{{ item.name }}</span>
    </div>

    <div
      v-show="showDraw"
      class="showDraw"
      :style="{ left: draX + 'px', top: draY + 'px' }"
    ></div>
  </div>
</template>

<script>
import { MergrArrayFun } from "@/utils/MergeArray";
export default {
  name: "BackPackComponents",
  props: {
    // 设置每行数量
    rows: {
      type: Number,
      default: 10,
    },
    // 设置每列数量
    colums: {
      type: Number,
      default: 3,
    },
    // 设置格子高度
    boxHeight: {
      type: Number,
      default: 88,
    },
    // 设置格子宽度
    boxWidth: {
      type: Number,
      default: 88,
    },
    // 允许多少格子可以使用
    isUse: {
      type: Number,
      default: 10,
    },
    // 背包列表
    list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    isUse: {
      handler() {
        this.drawBoxFun();
      },
    },
  },
  data() {
    return {
      backList: [],
      showDraw: false,
      // showDra 元素的水平位置
      draX: 0,
      // showDra 元素的垂直位置
      draY: 0,
    };
  },
  computed: {
    // 读取props的行数和列数、计算hear的宽高
    setRowsOrColumns() {
      return {
        "--setHearWidth": `${
          this.rows * this.boxWidth + 40 + (this.rows - 2) * 8
        }px`,
        "--setHearHeight": `${
          this.colums * this.boxHeight + 40 + (this.colums - 2) * 8
        }px`,
        "--setRows": `repeat(${this.rows}, ${this.boxWidth}px)`,
        "--setColumns": `repeat(${this.colums}, ${this.boxHeight}px)`,
      };
    },
  },
  mounted() {
    this.drawBoxFun();
  },
  methods: {
    // 绘制格子
    drawBoxFun() {
      // 创建对应空数组
      let backList = Array.from(
        { length: this.rows * this.colums },
        (_, index) => {
          // 当前格子是否可以使用
          let isUse = index + 1 > this.isUse;
          return {
            index: index + 1,
            isUse,
          };
        }
      );
      this.backList = MergrArrayFun(backList, this.list);
    },
    // 开启点击事件监听
    openMenuFun(event, item, index) {
      this.showDraw = false;
      // 阻止默认事件
      event.preventDefault();
      // 当格子内不存在数据或未开启状态时，不允许点击
      if (item.isUse) {
        //
        let list = this._.cloneDeep(this.backList);
        let isUseNum = 0;
        try {
          list.forEach((item, i) => {
            if (i <= index && item.isUse) {
              isUseNum++;
            }
          });
        } catch (error) {}
        this.$confirm(
          `是否开启${isUseNum == 1 ? "当前" : isUseNum + "个"}背包格子`,
          "背包格子未开启",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then((res) => {
            this.$emit("openBackGrid", isUseNum);
          })
          .catch((err) => {
            console.log(err);
          });

        return;
      }

      if (!item.name) {
        return;
      }
      this.draX = event.clientX;
      this.draY = event.clientY;
      this.showDraw = true;
    },
    // 关闭点击事件监听
    closeMenuFun() {
      this.showDraw = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.hear {
  display: grid;
  grid-template-columns: var(--setRows);
  grid-template-rows: var(--setColumns);
  width: var(--setHearWidth);
  height: var(--setHearHeight);
  background-color: #1f1f1f;
  gap: 8px;
  justify-content: center;
  align-content: center;
  position: relative;
  .item {
    width: 100%;
    height: 100%;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;

    &:hover {
      cursor: pointer;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    &-name {
      color: #fff;
    }
  }

  .showDraw {
    position: absolute;
    background: #fff; // 为了方便查看，添加半透明背景
    z-index: 9;
    width: 100px;
    height: 200px;
  }
}
</style>
